<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <a href="javascript:;" id="my-cart" onclick="toMyCart()">购物车</a>
    <div id="box">
      <!-- <h1></h1>
      <p></p>
      <img src="" alt="" />
      <p></p>
      <button onclick="addCart()">加入购物车</button> -->
    </div>

    <script>
      // 跳转了修改页面-- 需要在 输入框中显示 要修改的商品的信息
      //  ****** 在a标签跳转过程中 把 要修改的商品的id 传递到 修改页面
      //   update.html?id=商品的id
      // 修改页面 就可以获取id ，根据 商品id  调用 接口获取商品的详情--》输入框
      //   http://127.0.0.1:5500/day25/25-%E4%BB%A3%E7%A0%81/admin/update.html?id=643725
      // 修改页面测试的 ，通过商品列表 点击 跳转再测试
      //获取 当前页面 url 后面 ？id=xxx
      //   location.search ---> "?id=643725"
      console.log(location.search); //?id=643725
      //   let searchStr = location.search.slice(1);
      //   console.log(searchStr); //id=643725&aa=2&bb=2
      //   let key = "id";
      //   let value = null;
      //   let arr = searchStr.split("&");
      //   console.log(arr);
      //   arr.forEach((v) => {
      //     let tempArr = v.split("=");
      //     console.log(tempArr);
      //     if (tempArr[0] == key) {
      //       value = tempArr[1];
      //     }
      //   });
      //   console.log(value); //643725

      //   把搜索字符串 ？id=22&a=2&b=2 转为对象
      let searchObj = new URLSearchParams(location.search);
      console.log(searchObj);
      //获取 id 的值
      let pid = searchObj.get("id");
      console.log(pid);
      let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
      axios.get(detailProductAPI, { params: { id: pid } }).then((r) => {
        //r.data 服务器返回的数据
        let pObj = r.data.data;
        console.log(pObj);
        if (pObj) {
          // Cannot read properties of null (reading 'pname')
          let str = `<h1>${pObj.pname}</h1>
                    <p>${pObj.pprice}</p>
                    <img src="${pObj.pimg}" alt="" />
                    <p>${pObj.pdesc}</p>
                    <input type="number" name="" id="ipt" value="1">
                    <button onclick="addCart()">加入购物车</button>`;

          let box = document.querySelector("#box");
          box.innerHTML = str;
        } else {
          alert("商品不存在");
        }
      });
      /* 
      根据商品 id 获取商品详情接口

     接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
    http://jx.xuzhixiang.top/ap/api/detail.php?id=1
    服务器返回json数据

      
      */

      // 加入购物车
      /* 
      
      给用户购物车中添加商品 接口

      接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
      接口请求方式：get
      接口参数：
            uid  用户id
            pid  商品id
            pnum  要添加的商品数量
      */
      async function addCart() {
        // 获取参数
        let uid = localStorage.getItem("id");
        pid;
        let ipt = document.querySelector("#ipt");
        let pnum = ipt.value;
        let params = { uid, pid, pnum };
        console.log(params);
        let addCartAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
        let res = await axios.get(addCartAPI, { params });
        console.log(res.data);
        alert("加入购物车成功");
      }

      function toMyCart() {
        // 获取参数
        let uid = localStorage.getItem("id");
        if (uid) {
          location.href = "cart.html";
        } else {
          location.href = "login.html";
        }
      }
    </script>
  </body>
</html>
